<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px;" @click="addRow">新增分类</el-button>
        <!-- 分类管理 -->
        <el-table ref="tableRef" :data="tableDate" style="margin-bottom: 20px;" row-key="id" border default-expand-all>
            <el-table-column prop="name" label="分类名称" sorttable />
            <el-table-column label="分类级别">
                <template #default="{ row }">
                    <span v-if="row.pid == 0">一级分类</span>
                    <span v-else>二级分类</span>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="分类编号" />
            <el-table-column label="分类图片">
                <template #default="{ row }">
                    <el-image v-if="row.picture != ''" :src="row.picture" fit="contain"
                        style="display:flex;align-items:center;height:60px" />
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
                <template #default="{ row }">
                    <el-button type="warning" @click="editRow(row)">编辑</el-button>
                    <!-- 新增分类的弹出框 -->
                    <el-dialog :modal="false"  v-model="dialogVisible" :title="id ? '修改分类' : '新增分类'" :before-close="handleBeforeClose">
                        <CategoryEdit></CategoryEdit>
                    </el-dialog>
                    <el-button type="danger" @click="delRow(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import CategoryEdit from '../../components/CategoryEdit.vue';
import { ElMessageBox } from 'element-plus';
import { ref, onMounted } from 'vue'
import { getCategoryList } from '../../api';
import { draggable } from 'element-plus/es/components/color-picker/src/utils/draggable.mjs';
const tableDate = ref([])
const dialogVisible = ref(false)
const id = ref(0)
onMounted(() => { loadCategoryList() })
// 查询分类列表
const loadCategoryList = async () => {
    let data = await getCategoryList()
    // console.log(data)    //在控制台上输出分类一维数组
    tableDate.value = convertToTree(data)
    // console.log('tableDate', tableDate)
}
//将一维数组转换成树形结构的方法
const convertToTree = data => {
    const treeData = []
    const map = {}
    //遍历一维数组数据，建立节点映射表
    for (const item of data) {
        map[item.id] = { ...item, children: [] }
    }
    //遍历映射表，将节点添加到父节点的children中
    for (const item of data) {
        const node = map[item.id]
        if (item.pid === 0) {
            treeData.push(node)
        } else {
            const parent = map[item.pid]
            parent.children.push(node)
        }
    }
    // console.log('map', map)    //在控制台上输出转换过度对象map
    // console.log('treeDate', treeData)   //在控制台上输出树形结构数组
    return treeData
}
//新增分类
const addRow = () => {
    id.value = 0
    dialogVisible.value = true
}
//修改分类
const editRow = row => {
    id.value = row.id
    dialogVisible.value = true
}
//关闭弹出框
const handleBeforeClose = () => {
    ElMessageBox.confirm('确定关闭对话框吗？', {
        showClose: false,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        dialogVisible.value = false
    }).catch(() => { })
}
//删除分类
const delRow = () => { }
</script>
